import Link from "next/link"

function Container({ title, urls }) {
  return (
    <div className='place-items-center pt-10'>
      <h1 className="card-title pb-5">{title}</h1>
      {
        urls.map((t, k) => {
          return (
            <div key={k} class="collapse collapse-arrow border-2 border-solid border-base-300 rounded-none mb-1">
              <input type="checkbox" class="peer" />
              <div
                class="collapse-title">
                {t.title}
              </div>
              <div
                class="collapse-content">
                <div className="border-t place-items-center border-base-300 pt-2">
                  {
                    t.data.map((dd, kk) => {
                      return (
                        <div className="flex flex-row w-full pl-24 pr-24  border-b p-3" key={kk}>
                          <p className="flex-1">{dd.author}</p>
                          <p className="flex-3">{dd.title}</p>
                          <Link className="flex-1 link link-hover text-right underline" target="new" href={dd.url}>PDF</Link>
                        </div>
                      )
                    })
                  }
                </div>
              </div>
            </div>
          )
        })

      }

    </div>
  )
}

export default Container